
import React, { useState, useEffect } from 'react';
import { getSecondList,ListItem } from './interface';
import './index.less';

const SecondPage = (props) => {
	const { active,change } = props;
	const [list, setList] = useState(getSecondList(59));
	function activeChange(params: ListItem) {
		change(params);
	}
	// render List
	function renderList() {
		return list.map((item, index) => {
			return (
				<span
					onClick={activeChange.bind(this, item)}
					key={index}
					className={`datepicker-second-item ${
						item.value === active ? 'datepicker-second-active' : ''
					}`}
				>
					{item.label}
				</span>
			);
		});
	}

	return <div className="datepicker-second">{renderList()}</div>;
};
export default SecondPage;
